<!-- 采购单 -->
<template>
  <view class="purchaseOrderDetails">
    <view class="top">
      <van-cell-group>
        <van-field
          :value="purchaseinfo.type_name"
          label="采购单类型："
          readonly
        ></van-field>
        <van-field
          :value="purchaseinfo.purchase_reason"
          label="采购事由:"
          readonly
        ></van-field>
        <van-field
          :value="purchaseinfo.remarks"
          label="备注："
          readonly
        ></van-field>
      </van-cell-group>
    </view>
    <view class="content">
      <view class="title flexb">
        <view class="title_left f26"> 采购商品明细 </view>
        <view class="title_right f26">
          共<text class>{{ purchasegoodsinfo.length }}</text >件商品
        </view>
      </view>
      <view class="list_box">
        <view class="list_item f28" v-for="(item, index) in purchasegoodsinfo" :key="index">
          <view class="name_number flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view class="number"> 数量：{{ item.goods_num }}斤</view>
          </view>
          <view> 供应商：{{ item.supplier_name }}</view>
          <view class="expecte_date" >期望送货日期：{{ item.expect_time }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      purchase_sn: "",
      purchaseinfo: "",
      purchasegoodsinfo: [],
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {
    this.purchase_sn = options.purchase_sn;
    if (this.purchase_sn) {
      this.getDetailbyorder(this.purchase_sn);
    }
  },
  methods: {
    /*获取页面数据*/
    async getDetailbyorder(purchase_sn) {
      let res = await this.$ajax.onDetailbyorder({
        purchase_sn: purchase_sn,
      });
      if (res.code == 1) {
        this.purchaseinfo = res.data.purchaseinfo;
        this.purchasegoodsinfo = res.data.purchasegoodsinfo;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
  },

  mounted() {},

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>
  
<style lang="scss">
.purchaseOrderDetails {
  width: 100%;
  height: 100vh;
  background: rgba(244, 244, 244, 1);

  .top {
    .van-field__label {
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      font-family: SourceHanSansSC-regular;
    }
  }

  .content {
    .title {
      padding: 10rpx 20rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        font-family: SourceHanSansSC-regular;
      }

      .title_right {
        color: rgba(153, 153, 153, 1);
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
        }
      }
    }

    .list_box {
      .list_item {
        width: 100%;
        height: 200rpx;
        line-height: 50rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-family: Arial;
        padding: 20rpx 20rpx;
        border-bottom: 0.5rpx solid #e7e4e4;

        .name_number {
          .name {
            color: rgba(16, 16, 16, 1);
            font-family: SourceHanSansSC-bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              background: rgba(98, 177, 88, 1);
            }
          }
        }

        .expecte_date {
          padding-bottom: 20rpx;
        }
      }

      .expeclist_item_date:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>